
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Zhou Wenying
  Date: 2023/3/7
  Time: 14:34
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>旧书交易平台_售卖专场</title>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="pragma" content="no-cache">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
</head>
<body>
<jsp:include page="/page/head2.jsp"></jsp:include>
<br><br>

<div class="container-fluid">
<%--    <img id="bookImg" style="height: 100px;width: 90px" src="/static/image/me.jpg">--%>

    <input  type="file" id="imgfile" accept="image/*" class="hiddenInput" style="display:none"/>
    <img id="img" src="" class="hidden" />

    <form class="form-horizontal" action="doSaveBook" method="post" >
        <input type="hidden" id="file" name="file">
        <div class="form-group">
            <label for="input_name" class="col-sm-1 control-label">名称</label>
            <div class="col-sm-6">
                <input type="text" class="form-control"  name="bname" id="bname"  required="required">
            </div>
        </div>
        <div class="form-group">
            <label for="input_name" class="col-sm-1 control-label">作者</label>
            <div class="col-sm-6">
                <input type="text" class="form-control"  name="bauthor"  required="required">
            </div>
        </div>
        <div class="form-group">
            <label for="input_name" class="col-sm-1 control-label">出版社</label>
            <div class="col-sm-6">
                <input  type="text" class="form-control"  name="bpublisher"  required="required">
            </div>
        </div>
        <div class="form-group">
            <label for="imgfile" class="col-sm-1 control-label">图书照片信息</label>
            <div class="col-sm-6" >
                <div class="row">
                    <div class="col-sm-10" >
                        <input disabled="disabled" id="imgName" type="text" class="form-control" required="required" >
                    </div><%--当用户单击标签时，与“imgfile”相关联的表单控件将获得焦点。--%>
                    <div class="col-sm-2" >
                        <label for="imgfile" class="btn btn-default btn-primary">选择</label>
                    </div>

                </div>

            </div>
        </div>
        <div class="form-group">
            <label for="input_name" class="col-sm-1 control-label">原价</label>
            <div class="col-sm-6">
                <input type="text" class="form-control"  name="boprice" >
            </div>
        </div>
        <div class="form-group">
            <label for="input_name" class="col-sm-1 control-label">甩手价</label>
            <div class="col-sm-6">
                <input type="text" class="form-control"  name="bprice" >
            </div>
        </div>
        <div class="form-group">
            <label for="select_topic" class="col-sm-1 control-label">类目</label>
            <div class="col-sm-6">
                <select class="form-control" id="select_topic" name="btname">

                    <c:forEach items="${bookType}" var="t">
                        <option value="${t.btId }">${t.btName }</option>
                    </c:forEach>

                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="input_name" class="col-sm-1 control-label">书籍简介</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="input_name" name="bmark" >
            </div>
        </div>

        <div class="form-group">
            <label for="select_topic" class="col-sm-1 control-label">书籍新旧程度</label>
            <div class="col-sm-6">
                <select class="form-control" name="select_level" lay-verify="" lay-search>
                    <option value="一成新">一成新</option>
                    <option value="两成新">两成新</option>
                    <option value="三成新">三成新</option>
                    <option value="四成新">四成新</option>
                    <option value="五成新">五成新</option>
                    <option value="六成新">六成新</option>
                    <option value="七成新">七成新</option>
                    <option value="八成新">八成新</option>
                    <option selected="selected" value="九成新">九成新</option>
                    <option  value="九九新">九九新</option>
                </select>
            </div>
        </div>


        <div class="form-group">
            <div class="col-sm-offset-1 col-sm-10">
                <button type="submit" class="btn btn-success">提交保存</button>
            </div>
        </div>
    </form>
</div>


<!--footer-->
<jsp:include page="footer.jsp"></jsp:include>
<!--//footer-->


<div id="PopShowImg" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div style="background-color: #fff;">
            <div style="padding: 15px;" class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">图片剪辑</h4>
            </div>
            <div class="modal-body">
                <div class="row clearfix">
                    <div  class="col-sm-1" ></div>
                    <div  >
                        <canvas id="myCanvas" width="500" height="500" style="border:1px solid #0e0e0e;">
                            您的浏览器不支持 HTML5 canvas 标签。
                        </canvas>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button id="modelChange" type="button" class="btn btn-default btn-success">剪切</button>
            </div>
        </div>
    </div>
</div>


</body>
</html>

<script>

    var g_min = 0;
    var g_x = 0;
    var g_y = 0;

    $("#imgfile").change(function (evn) {
        var file = event.target.files[0];
        if (window.FileReader) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            //监听文件读取结束后事件
            reader.onloadend = function (e) {
                console.log("imgName:"+file.name);
                $("#imgName").val(file.name);
                popShow("PopShowImg");/*打开模态框*/
                $("#img").attr("src", e.target.result );

                var img = new Image;
                img.src = reader.result;
                img.onload = function () {
                    var width = img.width;
                    var height = img.height;
                    var c=document.getElementById("myCanvas");
                    var cc=$("#myCanvas");
                    var sizeX = cc.attr("width");
                    var sizeY = cc.attr("height");

                    var x = sizeX/width;
                    var y = sizeY/height;
                    var min = x;
                    if(x > y){
                        min = y;
                    }
                    g_min = min;
                    var ctx=c.getContext("2d");
                    ctx.scale(min,min);
                    var img2=document.getElementById("img");
                    console.log((sizeX-(width*min))/2)
                    console.log((sizeY-(height*min))/2)
                    //ctx.drawImage(img2,(sizeX-(width*min))/2,(sizeY-(height*min))/2);
                    if(x == y){
                        g_x = 0;
                        g_y = 0;
                    }else if(x > y){
                        g_x = 50;
                        g_y = 0;
                    }else{
                        g_x = 0;
                        g_y = 50;
                    }
                    ctx.drawImage(img2,g_x,g_y);
                };
            };
        }
    });

    window.onload = function(){

        var canvasId = "myCanvas";

        var move = false;
        var moveX = 0;
        var moveY = 0;

        var myCanvas = document.getElementById(canvasId);
        var img2=document.getElementById("img");

        myCanvas.onmousewheel = function(event){
            myCanvas.width=myCanvas.width;//清除
            var ctx=myCanvas.getContext("2d");
            if(event.wheelDelta > 0 || event.detail < 0){
                //向上滚
                g_min+=0.1;
            }else{
                //向下滚
                g_min-=0.1;
            }
            ctx.scale(g_min,g_min);
            ctx.drawImage(img2,g_x,g_y);
            event.preventDefault && event.preventDefault();//为火狐浏览器取消默认行为并兼容ie8
            return false;
        };

        myCanvas.onmousedown = function(event){
            //console.log("down:"+event.pageX + ':'  +event.pageY)
            move = true;
            moveX = event.pageX;
            moveY = event.pageY;
        }

        myCanvas.onmouseup = function(event){
            //console.log("up:"+event.pageX + ':'  +event.pageY)
            move = false;
        }

        myCanvas.onmouseout = function(event){
            //console.log("out:"+event.pageX + ':'  +event.pageY)
            move = false;
        }

        myCanvas.onmousemove = function(event){
            //console.log("move:"+event.pageX + ':'  +event.pageY)
            if(move){
                var x = event.pageX;
                var y = event.pageY;

                myCanvas.width=myCanvas.width;//清除
                var ctx=myCanvas.getContext("2d");
                ctx.scale(g_min,g_min);
                g_x = g_x + (x - moveX);
                g_y = g_y + (y - moveY);
                ctx.drawImage(img2,g_x,g_y);
                moveX = x;
                moveY = y;
            }

        }

        bind(myCanvas,"DOMMouseScroll",myCanvas.onmousewheel);//这是为了兼容火狐浏览器

        function bind(obj,eventStr,callback){
            if(obj.addEventListener){
                obj.addEventListener(eventStr,callback,false);
            }else{
                obj.attchEvent("on"+eventStr,function(){
                    //在匿名函数中调用回调函数,通过call方法来改变this的指向
                    callback.call(obj);
                });
            }
        }
    };

    $("#modelChange").click(function () {
// Generate the image data
        var Pic = document.getElementById("myCanvas").toDataURL("image/jpg");
        Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
        //设置
        $("#file").val(Pic);
        popHide("PopShowImg");
    })





</script>
